<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <!-- <select> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select -->
    <!-- HTML <select> 元素表示一个提供选项菜单的控件： -->
    <!-- multiple -->
    <!-- 这个布尔值属性表示列表中的选项是否支持多选。没有声明该值时，一次只能选中一个选项。声明这个属性后，大多数浏览器都会显示一个可滚动的列表框，而非一个下拉菜单。 -->
    <!-- name -->
    <!-- 该属性规定了控件的名称。 -->
    <!-- size -->
    <!-- 如果控件显示为滚动列表框（如声明了 multiple），则此属性表示为控件中同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。 -->
    <!-- autofocus -->
    <!-- 这个布尔值属性能够让一个对象在页面加载的时候获得焦点。一个文档中只有一个对象可以有这个属性。 -->
    <!-- form -->
    <!-- <select> 所关联的<form> (它的"表单拥有者")。其值必须是在同一文档中的 <form> 元素的id（如果没有设置这个属性， <select> 元素则与其任何存在的祖先 <form> 元素关联）。 -->
    <!-- 这个属性让你将 <select> 元素与文档中任意位置的 <form> 元素相关联，而不仅仅是包含 <select> 元素的 <form> 元素。这个属性还可以覆盖元素的祖先 <form> 元素。 -->

    <!-- <option> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/option -->
    <!-- HTML元素 <option>  用于定义在 <select>,  <optgroup> 或 <datalist> 元素中包含的项。<option> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。 -->
    <!-- selected -->
    <!-- 这个布尔属性存在时表明这个选项是否一开始就被选中。如果 <option> 元素是 <select> 元素的子元素，并且 <select> 元素的 multiple 属性没有设置，则 <select> 元素中只有一个 <option> 元素可以拥有 selected 属性。 -->
    <!-- value -->
    <!-- 这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。 -->
    <!-- disabled -->
    <!-- 如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的 <optgroup> 元素，则这个元素仍然是禁用的 。 -->

    <!-- <optgroup> -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/optgroup -->
    <!-- HTML元素 <optgroup> 为<select> 元素中的选项创建分组。 -->
    <!-- disabled -->
    <!-- 如果设置了这个布尔值，则不能选择这个选项组中的任何选项。通常浏览器会置灰这样的控件，它不接受任何浏览器事件，如鼠标点击或者焦点相关的事件。 -->
    <!-- label -->
    <!-- 选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。 -->

    <!-- datalist -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist -->
    <!-- HTML <datalist>元素包含了一组<option>元素，这些元素表示其它表单控件可选值. -->
    <!-- 该元素除了公用的全局属性之外，没有其他属性。 -->



    <!-- 下拉内容 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls#%E4%B8%8B%E6%8B%89%E5%86%85%E5%AE%B9 -->
    <h3>下拉内容</h3>

    <hr>

    <!-- 选择框 -->
    <!-- 选择框 -->
    <!-- 一个选择框是用<select>元素创建的，其中有一个或多个<option>元素作为子元素，每个元素都指定了其中一个可能的值。 -->
    <!-- 如果需要，可以使用selected属性在所需的<option>元素上设置选择框的默认值---在页面加载时会默认选择该选项。<option>元素也可以嵌套在<optgroup>元素中，以创建视觉关联的组值： -->
    <!-- 如果一个<option>元素设置了value属性，那么当提交表单时该属性的值就会被发送。如果忽略了value属性，则使用<option>元素的内容作为选择框的值。 -->
    <h4>选择框</h4>
    <select id="simple" name="simple">
        <option>Banana</option>
        <option>Cherry</option>
        <option>Lemon</option>
    </select>
    <select id="groups" name="groups">
        <optgroup label="fruits">
            <option>Banana</option>
            <option selected>Cherry</option>
            <option>Lemon</option>
        </optgroup>
        <optgroup label="vegetables">
            <option>Carrot</option>
            <option>Eggplant</option>
            <option>Potato</option>
        </optgroup>
    </select>

    <hr>

    <!-- 多选选择框 -->
    <!-- 默认情况下，选择框只允许用户选择一个值。通过将multiple属性添加到<select>元素，您可以允许用户通过操作系统提供的默认机制来选择几个值。 (如， 同时按下 Cmd/Ctrl 并点击多个值). -->
    <!-- 注意：在多个选项选择框的情况下，选择框不再显示值为下拉内容——相反，它们都显示在一个列表中。 -->
    <h4>多选选择框</h4>
    <select multiple id="multi" name="multi">
        <option>Banana</option>
        <option>Cherry</option>
        <option>Lemon</option>
    </select>

    <hr>

    <!-- 自动补全输入框 -->
    <!-- 您可以使用<datalist>元素来为表单小部件提供建议的、自动完成的值，并使用一些<option>子元素来指定要显示的值。 -->
    <!-- 然后使用list属性将数据列表绑定到一个文本框(通常是一个 <input> 元素)。 -->
    <!-- 一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本;通常，这是作为一个下拉框提供给用户的，匹配在输入框中输入了的内容。 -->
    <h4>自动补全输入框</h4>
    <label for="myFruit">What's your favorite fruit?</label>
    <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
    <datalist id="mySuggestion">
        <option>Apple</option>
        <option>Banana</option>
        <option>Blackberry</option>
        <option>Blueberry</option>
        <option>Lemon</option>
        <option>Lychee</option>
        <option>Peach</option>
        <option>Pear</option>
    </datalist>

    <hr>

    <h4>select size</h4>
    <select size="2">
        <option>Banana</option>
        <option>Cherry</option>
        <option>Lemon</option>
        <option>Rose</option>
        <option>Jack</option>
        <option>Lemon</option>
    </select>

    <hr>

    <h4>selector autofocus</h4>
    <select autofocus>
        <option>Banana</option>
        <option>Cherry</option>
        <option>Lemon</option>
    </select>

    <hr>

    <h4>selector form</h4>
    <div>
        关键词：
        <select name="wd" id="" form="form_baidu">
            <option value="Java">Java</option>
            <option value="HTML5">HTML5</option>
            <option value="Spring">Spring</option>
            <option value="MyBatis">MyBatis</option>
        </select>
    </div>
    <form id="form_baidu" action="https://www.baidu.com/s" target="_blank">
        <input type="submit" value="查询">
    </form>

    <hr>

    <h4>option selected</h4>
    <select name="" id="">
        <option value="Java">Java</option>
        <option value="HTML5" selected>HTML5</option>
        <option value="Spring">Spring</option>
        <option value="MyBatis">MyBatis</option>
    </select>

    <hr>

    <h4>option value</h4>
    <!-- 如果一个<option>元素设置了value属性，那么当提交表单时该属性的值就会被发送。如果忽略了value属性，则使用<option>元素的内容作为选择框的值。 -->
    <form action="">
        <select name="course" id="">
            <option value="Java">Java</option>
            <option>HTML5</option>
            <option>Spring</option>
            <option value="MyBatis">MyBatis</option>
            <input type="submit" value="提交">
        </select>
    </form>

    <hr>

    <h4>option & optgroup disable</h4>
    <select name="" id="">
        <option value="Java">Java</option>
        <option value="HTML5" disabled>HTML5</option>
        <option value="Spring" disabled>Spring</option>
        <option value="MyBatis">MyBatis</option>
        <optgroup label="programing">
            <option value="Java" disabled>Java</option>
            <option value="HTML5">HTML5</option>
            <option value="Spring">Spring</option>
            <option value="MyBatis">MyBatis</option>
        </optgroup>
        <optgroup label="programing(disable)" disabled>
            <option value="Java">Java</option>
            <option value="HTML5">HTML5</option>
            <option value="Spring">Spring</option>
            <option value="MyBatis">MyBatis</option>
        </optgroup>
    </select>


</body>

</html>

<!-- 原生表单部件 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Basic_native_form_controls -->

<!-- <input>：输入（表单输入）元素 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input -->